<template>
  <view class="flex align-center flex-column pageHeight wh_750 bg_F5F5F5">
    <s-header-title ref="headerTitle" isDisplayBack title="字辈" is-fixed
                    background="#FFFFFF"
                    @getPageHeight="getPageHeight" zIndex="10">
    </s-header-title>
    <view :style="{height: `${page.headerHeight}px`}"></view>
    <view class="wh_702 ml_22 mt_18 fs_30 color_4B4B4B fw_500">
      请选择第几世开始
    </view>
    <view class="wh_702 flex align-center justify-between bg_FFFFFF hW_80 mt_14 mb_27"
          style="border-radius: 15rpx"
          @click.stop="openPopup"
    >
      <view class="fs_30 fw_500 color_4B4B4B ml_22">{{ page.selectInfo.shi_cn }}</view>
      <view class="flex align-center mr_22">
        <view class="fs_28 color_9F9F9F fw_500 mr_13">请选择</view>
        <text class="iconfont icon-ic_rightarrow fs_26"></text>
      </view>
    </view>
    <scroll-view :style="{
      height: `calc(100vh - ${page.headerHeight + getPx('174rpx')}px)`
    }"
                 scroll-y
    >
      <view class="flex align-center flex-column">
        <view class="wh_702 flex align-center justify-between bg_FFFFFF hW_80 mt_20"
              style="border-radius: 15rpx"
              v-for="(item,index) in page.pageSetArray"
              :key="index"
              @click.stop="setGeneration(item)"
        >
          <view class="fs_30 fw_500 color_4B4B4B ml_22">{{ item.shi_cn }}</view>
          <view class="flex align-center mr_22">
            <view class="fs_28 color_9F9F9F fw_500 mr_22">{{ item.generation || '请输入字辈' }}</view>
            <image :src="`${IMG_URL}/index/edit_generation.png`" class="wh_27 hW_27"></image>
          </view>
        </view>
      </view>
      <view class="hW_190"></view>
    </scroll-view>
    <view class="wh_470 hW_80 bg_FF4206 flex align-center justify-center fs_30 fw_500 color_FFFFFF"
          style="position: fixed;bottom: 98rpx;left: 50%;transform: translateX(-50%);border-radius: 41rpx"
          @click.stop="addOpenPopUp"
    >
      续字辈
    </view>

    <uni-popup ref="generationPopup" type="bottom">
      <view class="wh_750 bg_FFFFFF flex align-center flex-column"
            style="border-radius: 21rpx 21rpx 0 0;margin: 0 auto">
        <view class="wh_710 hW_80 flex align-center justify-between">
          <view @click.stop="closePopup">取消</view>
          <view>选择字辈</view>
          <view @click.stop="selectIndex()">确定</view>
        </view>
        <view class="wh_750 hW_400" v-if="page.isShow">
          <picker-view class="wh_750 hW_400"
                       :value="page.selectIndex"
                       @change="pickChange"
          >
            <picker-view-column class="flex align-center">
              <view class="flex align-center justify-center"
                    v-for="(item,index) in page.list"
                    :key="index"
              >
                {{ item.shi_cn }}
              </view>
            </picker-view-column>
          </picker-view>
        </view>
      </view>
    </uni-popup>

    <first_popup ref="familyMemberPopUp" @closePopup="nameBoxClose">
      <template #content>
        <view class="familyMemberPopUp flex flex-column align-center">
          <view class="familyMemberPopUp_title mt_45">
            <view class="familyMemberPopUp_title_name">
              修改字辈
            </view>
          </view>
          <image class="familyMemberPopUp_icon z_1" :src="`${IMG_URL}/index/add_icon.png`"></image>
          <view class="familyMemberPopUp_editInfo flex align-center justify-between mt_64">
            <view class="familyMemberPopUp_editInfo_left flex align-center justify-center">
              <input type="text" v-model="page.nameBox" placeholder="请输入字辈"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder"
                     :focus="page.nameFocus"
                     @blur="nameBoxClose"
              >
            </view>
          </view>
        </view>
      </template>
    </first_popup>

    <first_popup ref="addPopUp" @closePopup="closeFirstPopup">
      <template #content>
        <view class="familyMemberPopUp flex flex-column align-center">
          <view class="familyMemberPopUp_title mt_45">
            <view class="familyMemberPopUp_title_name">
              修改字辈
            </view>
          </view>
          <image class="familyMemberPopUp_icon z_1" :src="`${IMG_URL}/index/add_icon.png`"></image>
          <view class="familyMemberPopUp_editInfo flex align-center justify-between mt_64">
            <view class="familyMemberPopUp_editInfo_left flex align-center justify-center">
              <input type="text" v-model="page.addBox" placeholder="请输入字辈"
                     placeholder-class="familyMemberPopUp_editInfo_placeholder"
                     :focus="page.addFocus"
                     @blur="addBoxClose"
              >
            </view>
          </view>
        </view>
      </template>
    </first_popup>
  </view>
</template>

<script setup>
  import { reactive, computed, ref } from 'vue';
  import sheep from '@/sheep';
  import { onLoad } from '@dcloudio/uni-app';
  import { getPx } from '@/sheep/helper';
  import First_popup from '@/pages/genealogy/components/first_popup.vue';

  const page = reactive({
    headerHeight: 0,
    options: {},
    list: [],
    selectIndex: [0],
    selectInfo: {},
    pageSetArray: [],
    nameBox: '',
    nameFocus: false,
    addBox: '',
    addFocus: false,
    isShow: false,
  });
  const generationPopup = ref();
  const familyMemberPopUp = ref();
  const addPopUp = ref();

  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);

  onLoad((options) => {
    page.options = options;
    getGenealogyBeginShi();
  });

  function getPageHeight(number) {
    page.headerHeight = number;
  }

  async function getGenealogyBeginShi() {
    const { data } = await sheep.$api.genealogy.getGenealogyBeginShi({
      genealogy_id: page.options.id,
    });
    data.forEach((item, index) => {
      if (item.selected == 1) {
        page.selectInfo = item;
        page.selectIndex = [index];
      }
    });
    const res = await sheep.$api.genealogy.getGenealogyShiSetting({
      genealogy_id: page.options.id,
    });
    page.pageSetArray = res.data;
    page.list = data;
  }

  function openPopup() {
    page.isShow = true;
    generationPopup.value.open();
  }

  async function selectIndex() {
    console.log(page.selectIndex);
    const { code, msg } = await sheep.$api.genealogy.updateGenealogyBeginShi({
      genealogy_id: page.options.id,
      begin_shi: page.list[page.selectIndex].shi,
    });
    if (code == 1) {
      await getGenealogyBeginShi();
      generationPopup.value.close();
      page.isShow = false;
    } else {
      sheep.$helper.toast(msg);
    }
  }

  function closePopup() {
    generationPopup.value.close();
    page.isShow = false;
  }

  function pickChange(e) {
    console.log(e);
    page.selectIndex = e.detail.value;
  }

  function setGeneration(info) {
    page.nameBox = info.generation;
    page.nameFocus = true;
    familyMemberPopUp.value.openPopup({
      title: '修改字辈',
      showTitle: false,
      maskClick: false,
      popupBackground: true,
      confirm: async () => {
        const { code, msg } = await sheep.$api.genealogy.updateGenealogyShiSetting({
          id: info.id,
          generation: page.nameBox,
        });
        if (code == 1) {
          sheep.$helper.toast('修改成功');
          await getGenealogyBeginShi();
          familyMemberPopUp.value.closePopup();
        } else {
          sheep.$helper.toast(msg);
        }
      },
    });
  }

  function nameBoxClose() {
    page.nameFocus = false;
  }

  function closeFirstPopup() {
    page.addFocus = false;
    page.addBox = '';
  }

  function addBoxClose() {
    page.addFocus = false;
    // page.addBox = ''
  }

  function addOpenPopUp() {
    page.addFocus = true;
    addPopUp.value.openPopup({
      title: '添加字辈',
      showTitle: false,
      maskClick: false,
      popupBackground: true,
      confirm: async () => {
        const { code, msg } = await sheep.$api.genealogy.addGenealogyShiSetting({
          genealogy_id: page.options.id,
          generation: page.addBox,
        });
        if (code == 1) {
          sheep.$helper.toast('添加成功');
          page.addBox = '';
          await getGenealogyBeginShi();
          addPopUp.value.closePopup();
        } else {
          sheep.$helper.toast(msg);
        }
      },
    });
  }
</script>


<style scoped lang="scss">
  .familyMemberPopUp {
    width: 506rpx;

    .familyMemberPopUp_title {
      width: 454rpx;

      .familyMemberPopUp_title_name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 48rpx;
        color: #292929;

      }

      .familyMemberPopUp_title_detail {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #9F9F9F;
      }
    }

    .familyMemberPopUp_icon {
      width: 147rpx;
      height: 147rpx;
      position: absolute;
      top: 0;
      right: 0;
    }

    .familyMemberPopUp_scrollView {
      width: 506rpx;
      overflow: hidden;
      white-space: nowrap;

      .familyMemberPopUp_scrollView_list {
        display: inline-block;
      }
    }

    .familyMemberPopUp_editInfo {
      width: 506rpx;

      .familyMemberPopUp_editInfo_left {
        width: 506rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_right {
        width: 239rpx;
        height: 80rpx;
        background: #FFFFFF;
        border-radius: 40rpx 40rpx 40rpx 40rpx;
        border: 2rpx solid #707070;

        input {
          text-align: center;
        }
      }

      .familyMemberPopUp_editInfo_placeholder {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 28rpx;
        color: #A0A0A0;
      }
    }
  }

  .familyAnniversaryPopUp {
    width: 496rpx;

    .familyMemberPopUp_title {
      width: 454rpx;

      .familyMemberPopUp_title_name {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 48rpx;
        color: #292929;

      }

      .familyMemberPopUp_title_detail {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 24rpx;
        color: #9F9F9F;
      }
    }

    .familyMemberPopUp_icon {
      width: 147rpx;
      height: 147rpx;
      position: absolute;
      top: 0;
      right: 0;
    }

    .familyAnniversaryPopUp_list {
      margin: 52rpx 0;

      .familyAnniversaryPopUp_list_text {
        font-family: PingFang SC, PingFang SC;
        font-weight: 500;
        font-size: 34rpx;
        color: #000000;
      }

      .familyAnniversaryPopUp_list_line {
        width: 30rpx;
        height: 30rpx;
        border-radius: 50%;
        border: 2rpx solid #2F2F2F;
      }

      .familyAnniversaryPopUp_list_selectLine {
        width: 26rpx;
        height: 26rpx;
        border-radius: 50%;
        border: 6rpx solid #FF4206;
      }
    }
  }
</style>
